<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container mx-auto space-y-8">
    <div  class="flex items-center">
        <label class="mx-6 grid grid-flow-col items-center gap-3 text-sm font-semibold text-gray-900 select-none dark:text-gray-200">
            <div class="grid items-center justify-center">
                <input type="checkbox" class="peer col-start-1 row-start-1 h-4 w-4 appearance-none rounded border border-gray-300 ring-transparent checked:border-violet-600 checked:bg-violet-600 dark:border-gray-600 dark:checked:border-violet-600" />
                <svg class="invisible col-start-1 row-start-1 stroke-white peer-checked:visible dark:text-violet-300" viewBox="0 0 14 14" fill="none">
                    <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </div>
            Falls back to default appearance
        </label>
    </div>
</div>
</body>
</html>